<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户界面</title>
    <script type="text/javascript" src="/js/jquery-3.6.0.js"/>
    <script>
        $(function(){

        })
    </script>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        main{
            height:100% ;
            display: grid;
            grid-template-columns: 150px calc(100% - 150px);
        }
        aside{
            background-color: black;
        }
        nav{
            height: 60px;
            background-color: #FFFFFF;
        }
        article{
            height: 93%;
            margin: 15px;
            border-style: solid;
            border-width: 3px;
            border-color: black;
        }

        a{
            text-decoration: none;
            color: #FFFFFF;
            font-size: 15px;
        }
    </style>
</head>

<body>
<main>
    <aside style="color: #DDDDDD;font-size:larger"> <br>自行车管理系统
            <a href="u_index.jsp">
                <p style="text-align: center;">
                    <br>自行车展示
                </p>
            </a>
            <a href="online">
                <p style="text-align: center;">
                    <br>在线留言
                </p>
            </a>
            <a href="user.jsp">
                <p style="text-align: center;">
                    <br>用户信息
                </p>
            </a>
            <a href="rent">
                <p style="text-align: center;">
                    <br>用户租赁
                </p>
            </a>
            <a href="leaseinfo">
                <p style="text-align: center;">
                    <br>租赁信息
                </p>
            </a>
        </aside>
    <!--页面内容区块-->
    <section>
        <nav>操作导航</nav>
        <hr>
        <article>
            <div>我的租赁信息</div>
            <div>租赁记录</div>
            <table>
                <thead>
                <tr>
                    <th>租赁编号</th>
                    <th>租赁类型</th>
                    <th>租赁车名</th>
                    <th>租赁状态</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <c:if test="${not empty leaseInfo}">
                    <tr>
                        <td>${leaseInfo.number}</td>
                        <td>${leaseInfo.type}</td>
                        <td>${leaseInfo.bname}</td>

                        <td>${leaseInfo.status}</td>
                        <c:if test="${leaseInfo.status == '已租赁'}">
                            <td>${leaseInfo.holder}</td>
                            <td>
                                <input type="button" value="归还" id="return"/>
                            </td>
                        </c:if>
                    </tr>
                </c:if>
                </tbody>
            </table>
        </article>
    </section>
</main>
</body>

<script type="text/javascript">
    $(function () {
        $("#return").click(function () {
            $.ajax({
                url: "return",
                type: "post",
                data:{
                },
                contentType:'application/x-www-form-urlencoded;charset=UTF-8',

                success: function (req) {
                    if (req === "1"){
                        alert("归还成功");
                        window.location.href = "leaseinfo";
                    }else {
                        alert("归还失败")
                    }

                }
            })
        })
    })
</script>


</html>
